<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2:事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1 style="color: aqua;">知识点1:v-on 指令:鼠标点击事件</h1>
        <p>我已经被你电击了{{num}}次</p>
        <button v-on:click="num++">点我一次电机庞静汉一次</button>
        <button v-on:click="num--">点我一次电机少电庞静汉一次</button>
        <h3>许多事件处理逻辑会更加复杂,所以复杂的逻辑直接把代码写在v-on指令中是不合适的
            因此，对于复杂的逻辑，可以把代码写在方法里，然后进行调用。
        </h3>
        <button v-on:click="logInfo()">打印消息</button>
        <button v-on:click="logInfo('小庞好可怜')">打印带参数的消息</button>
        <h3>v-on:click可以简写为@click</h3>
        <button @click="logInfo('小庞加油！')">简写打印</button>
        <h1 style="color: aqua;">知识点2:键盘事件keydown和keyup 键的按下和释放</h1>
        <input type="text" @keyup="show('小庞该释放了')">
        <input type="text" @keyup="show('小庞该按了')">
        <h1 style="color: rgb(93, 93, 139);">知识点3:dblclick双击事件,contextmenu右击事件,mouseover鼠标移上事件,
            mouseout鼠标移开事件
        </h1>
        <button @dblclick="num++">双击我</button>
        <button @contextmenu="num++">右击我</button>
        <button @mouseover="num++">鼠标移上来了</button>
        <button @mouseout="num--">鼠标移开了</button>
        <h1 style="color: rgb(114, 100, 83);">知识点4：事件修饰符</h1>
        <h3>1..once 事件修饰符，表示该事件只能点一次</h3>
        {{num}}
        <button @click.once="num++">请相信我只能一次</button>
        <h3>2..prevent 事件修饰符 当事件触发时，阻止元素默认行为</h3>
        <h4>例子：submit有一个默认行为点击提交后会重新加载页面，通过prevent可以阻止这个行为</h4>
        <form @submit="handleSubmit()">
            <h5>不使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <form @submit.prevent="handleSubmit()">
            <h5>使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <h3>3..stop事件 阻止冒泡</h3>
        <h4>冒泡是内部元素事件被触发后，继续向外层触发事件</h4>
        <div id="box1" @click="box('我是box1')">box1
            <div id="box2" @click="box('我是box2')">box2
                <div id="box3"@click.stop="box('我是box3')">box3</div>
            </div>
        </div>
        <h3>4. .capture 事件捕获</h3>
        <h4>如果我们在层叠事件中想要先执行某个事件，可以用capture修饰符他是
            当内部的元素被触发时，先处理capture修饰的事件，然后再提交当前事件捕获时
            由外到内
        </h4>
         <div id="box1" @click.capture="box('我是box1')">box1
            <div id="box2" @click="box('我是box2')">box2
                <div id="box3"@click="box('我是box3')">box3</div>
            </div>
        </div>
        <h3>5..self 只在绑定了事件的那个对象层中使用</h3>
        <div id="box1" @click="box('我是box1')">box1
            <div id="box2" @click.self="box('我是box2')">box2
                <div id="box3"@click="box('我是box3')">box3</div>
            </div>
        </div>
        <h3>6.监听键盘事件的按键修饰符</h3>
        <p>.enter .tab .delete (监听删除键和退格键) .esc .space .up .down .left .right 
            .shift .ctrl .alt .meta(win标徽键)
        </p>
        <h4>按下回车 弹出ok
        </h4>
        <input type="text" @keydown.enter="box('ok')">
        <input type="text" @keydown.enter.space="box('两个 ')">
        <p>当有两个或多个修饰符，需要同时按键才会触发</p>
        <h3>7.鼠标修饰符</h3>
        <p>.left .right .middle</p>
    </div>
</body>

</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                num: 0
            }
        },
        methods: {
            logInfo(val) {
                console.log(val || "被电的小庞你好！");
            },
            show(val) {
                console.log(val);
            },
            handleSubmit(){},
            box(val){
                alert(val)
            }
        },
    }).mount("#app")
</script>

<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: rgb(11, 194, 194);
    }
    #box2{
        height: 150px;
        width: 250px;
        background-color: rgb(236, 8, 8);
    }
    #box3{
        height: 100px;
        width: 200px;
        background-color: blueviolet;
    }
</style>